<template>
    <div>
        <el-row :gutter="20" class="form-line">
            <el-col :span="3" class="form-label">
                所属服务
            </el-col>
            <el-col :span="3">
                <el-select size="small"
                           v-model="menuObj.serviceCode"
                           @change="changeService"
                           filterable>
                    <el-option
                            v-for="item in menuObj.serviceList"
                            :key="item.serviceCode"
                            :label="item.serviceName"
                            :value="item.serviceCode">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="3" class="form-label">
                菜单名称
            </el-col>
            <el-col :span="3">
                <el-input v-model="menuObj.menuName" size="small"></el-input>
            </el-col>
            <el-col :span="6" :offset="6">
                <el-button type="primary" size="small" @click="selectMenuList">查询</el-button>
                <el-button type="primary" size="small" @click="menuObj.dialogFormVisible = true">新增</el-button>
            </el-col>
        </el-row>

        <el-table
                :data="menuObj.menuListForShow"
                min-width="100%">
            <el-table-column
                    prop="orderNum"
                    label="序号"
                    min-width="14%">
            </el-table-column>
            <el-table-column
                    prop="menuName"
                    label="名称"
                    min-width="28%">
            </el-table-column>
            <el-table-column
                    prop="menuPath"
                    label="路径"
                    min-width="30%">
            </el-table-column>
            <el-table-column
                    prop="menuType"
                    label="类型"
                    min-width="14%">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.menuType == 0" type="success" effect="dark" size="small">目录</el-tag>
                    <el-tag v-if="scope.row.menuType == 1" type="primary" effect="dark" size="small">菜单</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    min-width="14%">
                <template slot-scope="scope">
                    <el-switch
                            :active-value="1"
                            :inactive-value="0"
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="statusMenu(scope.row.id,scope.row.status)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作" min-width="20%">
                <template slot-scope="scope">
                    <el-popover
                            placement="top"
                            width="160"
                            v-model="scope.row.popover">
                        <p>确认删除？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope.row.popover = false">取消</el-button>
                            <el-button type="primary" size="mini" @click="deleteMenu(scope.row.id)">确定</el-button>
                        </div>
                        <el-button class="delete-margin" size="small" type="text" slot="reference">删除</el-button>
                    </el-popover>
                    <el-button type="text" size="small" @click="openEditMenu(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="openApiDialog(scope.row.id)">接口</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination
                class="se-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="menuObj.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="menuObj.currentSize"
                :hide-on-single-page="false"
                layout="total, sizes, prev, pager, next"
                :total="menuObj.total">
        </el-pagination>

        <el-dialog title="新增菜单" :visible.sync="menuObj.dialogFormVisible" width="35%">
            <el-form label-width="80px" :model="menuObj.menuDialog" :rules="menuRules" ref="addMenuForm">
                <el-form-item label="父菜单">
                    <el-select size="small"
                               v-model="menuObj.menuDialog.selectParentId"
                               clearable
                               filterable
                               placeholder="请输入菜单名称">
                        <el-option
                                v-for="item in menuObj.menuList"
                                :key="item.id"
                                :label="item.menuName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-select v-model="menuObj.menuDialog.menuType" size="small">
                        <el-option
                                v-for="item in menuObj.menuTypes"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuObj.menuDialog.menuName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="菜单路径">
                    <el-input v-model="menuObj.menuDialog.menuPath" size="small"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="orderNum">
                    <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="menuObj.menuDialog.orderNum" size="small"></el-input>
                </el-form-item>
                <el-form-item label="启用">
                    <el-switch
                            v-model="menuObj.menuDialog.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="menuObj.dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertMenu('addMenuForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑菜单" :visible.sync="menuObj.dialogFormVisibleEdit" width="35%">
            <el-form label-width="80px" :model="menuObj.menuDialog" :rules="menuRules" ref="editMenuForm">
                <el-form-item label="父菜单">
                    <el-select size="small"
                               v-model="menuObj.menuDialog.selectParentId"
                               clearable
                               filterable
                               placeholder="请输入菜单名称">
                        <el-option
                                v-for="item in menuObj.menuList"
                                :key="item.id"
                                :label="item.menuName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="menuType">
                    <el-select v-model="menuObj.menuDialog.menuType" size="small">
                        <el-option
                                v-for="item in menuObj.menuTypes"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuObj.menuDialog.menuName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="菜单路径">
                    <el-input v-model="menuObj.menuDialog.menuPath" size="small"></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="orderNum">
                    <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="menuObj.menuDialog.orderNum" size="small"></el-input>
                </el-form-item>
                <el-form-item label="启用">
                    <el-switch
                            v-model="menuObj.menuDialog.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="menuObj.dialogFormVisibleEdit = false">取 消</el-button>
                <el-button type="primary" @click="editMenu('editMenuForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="接口管理" :visible.sync="menuObj.dialogApiVisible" width="50%">
            <el-row :gutter="20" class="form-line">
                <el-col :span="4" class="form-label">
                    接口名称
                </el-col>
                <el-col :span="4">
                    <el-input v-model="menuObj.apiDialog.searchName" size="small"></el-input>
                </el-col>
                <el-col :span="6" :offset="10">
                    <el-button type="primary" size="small" @click="selectMenuApiList">查询</el-button>
                    <el-button type="primary" size="small" @click="menuObj.dialogInsertApiVisible = true">新增</el-button>
                </el-col>
            </el-row>
            <el-table
                    :data="menuObj.apiDialog.apiListShow"
                    min-width="100%">
                <el-table-column
                        prop="orderNum"
                        label="序号"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="menuName"
                        label="接口名称"
                        min-width="25%">
                </el-table-column>
                <el-table-column
                        prop="menuPath"
                        label="接口路径"
                        min-width="30%">
                </el-table-column>
                <el-table-column
                        label="状态"
                        min-width="10%">
                    <template slot-scope="scope">
                        <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="statusMenu(scope.row.id,scope.row.status)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" min-width="25%">
                    <template slot-scope="scope">
                        <el-popover
                                placement="top"
                                width="160"
                                v-model="scope.row.popover">
                            <p>确认删除？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="scope.row.popover = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteApi(scope.row.id)">确定</el-button>
                            </div>
                            <el-button class="delete-margin" size="small" type="text" slot="reference">删除</el-button>
                        </el-popover>
                        <el-button class="delete-margin" type="text" size="small" @click="openEditApi(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    class="se-pagination"
                    @size-change="handleApiSizeChange"
                    @current-change="handleApiCurrentChange"
                    :current-page.sync="menuObj.apiDialog.currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="menuObj.apiDialog.currentSize"
                    :hide-on-single-page="false"
                    layout="total, sizes, prev, pager, next"
                    :total="menuObj.apiDialog.total">
            </el-pagination>

            <el-dialog title="新增接口" :visible.sync="menuObj.dialogInsertApiVisible" width="30%" append-to-body>
                <el-form label-width="80px" :model="menuObj.apiDialog" :rules="apiRules" ref="addApiForm">
                    <el-form-item label="接口名称" prop="apiName">
                        <el-input v-model="menuObj.apiDialog.apiName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="接口路径" prop="apiPath">
                        <el-input v-model="menuObj.apiDialog.apiPath" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="序号" prop="orderNum">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="menuObj.apiDialog.orderNum" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="启用">
                        <el-switch
                                v-model="menuObj.apiDialog.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="menuObj.dialogInsertApiVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertApi('addApiForm')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="编辑接口" :visible.sync="menuObj.dialogEditApiVisible" width="30%" append-to-body>
                <el-form label-width="80px" :model="menuObj.apiDialog" :rules="apiRules" ref="editApiForm">
                    <el-form-item label="接口名称" prop="apiName">
                        <el-input v-model="menuObj.apiDialog.apiName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="接口路径" prop="apiPath">
                        <el-input v-model="menuObj.apiDialog.apiPath" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="序号" prop="orderNum">
                        <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="menuObj.apiDialog.orderNum" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="启用">
                        <el-switch
                                v-model="menuObj.apiDialog.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="menuObj.dialogEditApiVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editApi('editApiForm')">确 定</el-button>
                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                menuObj: {
                    serviceCode: "",
                    serviceList: [],
                    menuList: [],
                    menuListForShow: [],
                    menuName: "",
                    currentPage: 1,
                    currentSize: 10,
                    total: 0,
                    dialogFormVisible: false,
                    dialogFormVisibleEdit: false,
                    dialogInsertApiVisible: false,
                    dialogEditApiVisible: false,
                    dialogApiVisible: false,
                    menuTypes: [
                        {
                            id: 0,
                            name: "目录"
                        },
                        {
                            id: 1,
                            name: "菜单"
                        }
                    ],
                    menuDialog: {
                        selectParentId: "",
                        id: "",
                        menuName: "",
                        dialogSwitch: true,
                        menuType: "",
                        menuPath: "",
                        orderNum: "",
                        status: true,
                        menuList: []
                    },
                    menuTree: {},
                    defaultProps: {
                        children: 'childList',
                        label: 'menuName'
                    },
                    loading: false,
                    apiDialog: {
                        id: "",
                        parentId: "",
                        searchName: "",
                        apiList: [],
                        apiListShow: [],
                        apiName: "",
                        apiPath: "",
                        status: true,
                        orderNum: "",
                        currentPage: 1,
                        currentSize: 10,
                        total: 0
                    }
                },
                menuRules: {
                    menuType: [
                        {required: true, message: '请选择菜单类型', trigger: 'change'}
                    ],
                    menuName: [
                        {required: true, message: '请输入菜单名称', trigger: 'change'}
                    ],
                    orderNum: [
                        {required: true, message: '请输入序号', trigger: 'change'}
                    ]
                },
                apiRules: {
                    apiName: [
                        {required: true, message: '请输入接口名称', trigger: 'change'}
                    ],
                    apiPath: [
                        {required: true, message: '请输入路径', trigger: 'change'}
                    ],
                    orderNum: [
                        {required: true, message: '请输入序号', trigger: 'change'}
                    ]
                }
            };
        },
        mounted: function () {
            this.selectServiceList();
        },
        methods: {
            selectServiceList: function () {
                axios.get('/se/common/selectService'
                ).then(res => {//用function会获取不到vue data值
                    this.menuObj.serviceList = res.data.data;
                    if (this.menuObj.serviceList.length > 0) {
                        this.menuObj.serviceCode = this.menuObj.serviceList[0].serviceCode;
                        this.selectMenuList();
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            selectMenuList: function () {
                axios.get('/se/menu/selectMenuPage', {
                    params: {
                        serviceCode: this.menuObj.serviceCode,
                        menuName: this.menuObj.menuName
                    }
                }).then(res => {//用function会获取不到vue data值
                    this.menuObj.menuList = res.data.data;
                    this.menuObj.total = this.menuObj.menuList.length;
                    this.showCurrentPage();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            changeService: function (val) {
                this.selectMenuList();
            },
            handleSizeChange: function (pageSize) {
                this.menuObj.currentSize = pageSize;
                this.showCurrentPage();
            },
            handleCurrentChange: function (curPage) {
                this.showCurrentPage();
            },
            handleApiSizeChange: function (pageSize) {
                this.menuObj.apiDialog.currentSize = pageSize;
                this.showApiCurrentPage();
            },
            handleApiCurrentChange: function (curPage) {
                this.showApiCurrentPage();
            },
            showCurrentPage: function () {
                let start = (this.menuObj.currentPage - 1) * this.menuObj.currentSize;
                let end = this.menuObj.currentPage * this.menuObj.currentSize;
                this.menuObj.menuListForShow = this.menuObj.menuList.slice(start, end);
            },
            showApiCurrentPage: function () {
                let start = (this.menuObj.apiDialog.currentPage - 1) * this.menuObj.apiDialog.currentSize;
                let end = this.menuObj.apiDialog.currentPage * this.menuObj.apiDialog.currentSize;
                this.menuObj.apiDialog.apiListShow = this.menuObj.apiDialog.apiList.slice(start, end);
            },
            deleteMenu: function (id) {
                axios.delete('/se/menu/deleteMenu',
                    {
                        params: {
                            id: id
                        }
                    }
                ).then(res => {
                    this.selectMenuList();
                });
            },
            insertMenu: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/se/menu/insertMenu',
                            Qs.stringify({
                                serviceCode: this.menuObj.serviceCode,
                                menuName: this.menuObj.menuDialog.menuName,
                                menuType: this.menuObj.menuDialog.menuType,
                                menuPath: this.menuObj.menuDialog.menuPath,
                                parentId: this.menuObj.menuDialog.selectParentId,
                                orderNum: this.menuObj.menuDialog.orderNum,
                                status: this.menuObj.menuDialog.status == true ? 1 : 0
                            })
                        ).then(res => {
                            this.selectMenuList();
                            this.clearDialog();
                        });
                    } else {
                        return false;
                    }
                });
            },
            clearDialog: function () {
                this.menuObj.menuDialog.id = null;
                this.menuObj.menuDialog.menuName = null;
                this.menuObj.menuDialog.menuType = null;
                this.menuObj.menuDialog.menuPath = null;
                this.menuObj.menuDialog.selectParentId = null;
                this.menuObj.menuDialog.orderNum = null;
                this.menuObj.menuDialog.status = true;
                this.menuObj.dialogFormVisibleEdit = false;
                this.menuObj.dialogFormVisible = false;
            },
            openEditMenu: function (menuData) {
                this.menuObj.menuDialog.id = menuData.id;
                this.menuObj.menuDialog.menuName = menuData.menuName;
                this.menuObj.menuDialog.menuType = menuData.menuType;
                this.menuObj.menuDialog.menuPath = menuData.menuPath;
                this.menuObj.menuDialog.selectParentId = menuData.parentId;
                this.menuObj.menuDialog.orderNum = menuData.orderNum;
                this.menuObj.menuDialog.status = menuData.status == 1 ? true : false;
                this.menuObj.dialogFormVisibleEdit = true;
            },
            editMenu: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put('/se/menu/updateMenu',
                            Qs.stringify({
                                id: this.menuObj.menuDialog.id,
                                serviceCode: this.menuObj.serviceCode,
                                menuName: this.menuObj.menuDialog.menuName,
                                menuType: this.menuObj.menuDialog.menuType,
                                menuPath: this.menuObj.menuDialog.menuPath,
                                parentId: this.menuObj.menuDialog.selectParentId,
                                orderNum: this.menuObj.menuDialog.orderNum,
                                status: this.menuObj.menuDialog.status == true ? 1 : 0
                            })
                        ).then(res => {
                            this.selectMenuList();
                            this.clearDialog();
                        });
                    } else {
                        return false;
                    }
                });
            },
            selectMenuApiList: function () {
                axios.get('/se/menu/selectMenuApiPage', {
                    params: {
                        serviceCode: this.menuObj.serviceCode,
                        menuName: this.menuObj.apiDialog.searchName,
                        parentId: this.menuObj.apiDialog.parentId
                    }
                }).then(res => {
                    this.menuObj.apiDialog.apiList = res.data.data;
                    this.menuObj.apiDialog.total = this.menuObj.apiDialog.apiList.length;
                    this.showApiCurrentPage();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            insertApi: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/se/menu/insertMenu',
                            Qs.stringify({
                                serviceCode: this.menuObj.serviceCode,
                                menuName: this.menuObj.apiDialog.apiName,
                                menuType: 2,
                                menuPath: this.menuObj.apiDialog.apiPath,
                                parentId: this.menuObj.apiDialog.parentId,
                                orderNum: this.menuObj.apiDialog.orderNum,
                                status: this.menuObj.apiDialog.status == true ? 1 : 0
                            })
                        ).then(res => {
                            this.selectMenuApiList();
                            this.menuObj.dialogInsertApiVisible = false;
                            this.clearApiDialog();
                        });
                    } else {
                        return false;
                    }
                });
            },
            openEditApi: function (rowData) {
                this.menuObj.apiDialog.id = rowData.id;
                this.menuObj.apiDialog.apiName = rowData.menuName;
                this.menuObj.apiDialog.apiPath = rowData.menuPath;
                this.menuObj.apiDialog.orderNum = rowData.orderNum;
                this.menuObj.apiDialog.status = rowData.status == 1 ? true : false;
                this.menuObj.dialogEditApiVisible = true;
            },
            editApi: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put('/se/menu/updateMenu',
                            Qs.stringify({
                                id: this.menuObj.apiDialog.id,
                                serviceCode: this.menuObj.serviceCode,
                                menuName: this.menuObj.apiDialog.apiName,
                                menuType: 2,
                                menuPath: this.menuObj.apiDialog.apiPath,
                                parentId: this.menuObj.apiDialog.parentId,
                                orderNum: this.menuObj.apiDialog.orderNum,
                                status: this.menuObj.apiDialog.status == true ? 1 : 0
                            })
                        ).then(res => {
                            this.selectMenuApiList();
                            this.menuObj.dialogEditApiVisible = false;
                            this.clearApiDialog();
                        });
                    } else {
                        return false;
                    }
                });
            },
            deleteApi: function (id) {
                axios.delete('/se/menu/deleteMenu',
                    {
                        params: {
                            id: id
                        }
                    }
                ).then(res => {
                    this.selectMenuApiList();
                });
            },
            clearApiDialog: function () {
                this.menuObj.apiDialog.id = null;
                this.menuObj.apiDialog.apiName = null;
                this.menuObj.apiDialog.apiPath = null;
                this.menuObj.apiDialog.orderNum = null;
                this.menuObj.apiDialog.status = true;
            },
            openApiDialog: function (id) {
                this.menuObj.apiDialog.parentId = id;
                this.menuObj.dialogApiVisible = true;
                this.selectMenuApiList();
            },
            statusMenu: function (id,status) {
                axios.put('/se/menu/statusMenu',
                    Qs.stringify({
                        id: id,
                        status: status == true ? "1" : "0"
                    })
                ).then(res => {

                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        watch: {
            '$route' (to, from) {
                this.selectServiceList();
            }
        }
    }
</script>